<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :span="18">
                <el-row class="station-number" :gutter="10">
                    <el-col :span="8" style="height: 100%;">
                        <div class="box1">
                            <div class="img1"></div>
                            <span class="station-text">电站数量</span>
                            <span class="num">1</span>
                        </div>
                    </el-col>
                    <el-col :span="8" style="height: 100%;">
                        <div class="box2">
                            <div class="img2"></div>
                            <span class="station-text">电站数量</span>
                            <span class="num">2</span>
                        </div>
                    </el-col>
                    <el-col :span="8" style="height: 100%;">
                        <div class="box3">
                            <div class="img3"></div>
                            <span class="station-text">电站数量</span>
                            <span class="num">3</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <MapContainer />
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6"></el-col>
        </el-row>
        <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->

        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        </el-row>

        <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script>
import PanelGroup from '../../dashboard/PanelGroup'
import MapContainer from '@/components/MapContainer'


export default {
    name: 'Index',
    components: {
        PanelGroup,
        MapContainer
    },
    data() {
        return {
            img1: require('../../../assets/images/icon1.png')
        }
    },
    methods: {
        handleSetLineChartData(type) {
            this.lineChartData = lineChartData[type]
        }
    }
}
</script>

<style lang="scss" scoped>
.station-number {
    height: 80px;
}

.box1,
.box2,
.box3 {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 20px;
}

.box1 {
    background-image: linear-gradient(90deg, #8897f5, #9fabfe);
}

.box2 {
    background-image: linear-gradient(90deg, #c67ffd, #daa1fe);
}

.box3 {
    background-image: linear-gradient(90deg, #07b59d, #09d6b9);
}

.img1,
.img2,
.img3 {
    width: 51px;
    height: 46px;
    flex: 1;
}

.img1 {
    background: url('../../../assets/images/icon1.png');
    background-repeat: no-repeat;
}

.img2 {
    background: url('../../../assets/images/icon2.png');
    background-repeat: no-repeat;
}

.img3 {
    background: url('../../../assets/images/icon3.png');
    background-repeat: no-repeat;
}

.station-text {
    font-size: medium;
    color: #fff;
    width: 100px;
    flex: 4;
}

.num {
    text-align: right;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex: 1;
}
</style>
